<template>
	<view class="container">
		<uni-nav-bar :statusBar="true" :fixed="true" :bgImage="bgImage" title="TTS-人才赋能" />
		<!-- banner图 -->
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration" :circular="circular" indicator-active-color="#fff">
			<swiper-item v-for="(item,index) in bannerList" :key="index" @click="goBannerDetail(item)">
				<image class="images" :src="item.url" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- 公告栏 -->
		<view class="notice-bar">
			<view class="reren">
				<view v-for="(item, idx) in notices_1" :key="idx" class="notice-item" @click="goNotice(item)">
					<image :src="item.icon" class="notice-icon"></image>
					<text class="notice-content">{{ item.text }}</text>
				</view>
			</view>
			<view class="reren" style="padding: 0 20rpx; padding-bottom: 30rpx; box-sizing: border-box;">
				<view v-for="(item, idx) in notices_2" :key="idx" class="notice-item2" @click="goNotice(item)">
					<image :src="item.icon" mode="widthFix" class="notice-icon2"></image>
				</view>
			</view>
		</view>

		<view class="padding10">
			<!-- 热门推荐 -->
			<div class="titleinfo">
				推荐
				<text class="titleinfo_2"></text>
			</div>
			<view class="course-list">
				<view v-for="(item, idx) in hotList" :key="idx"  class="course-item" @click="goClassDetail(item)">
					<view>
						<view class="course-title">
							<view class="zuobijia">{{ item.courseTitle }}</view>
						</view>
						<view class="course-info">
							<view style="display: flex; align-items: center;justify-content: space-between;">
								<view class="course-infoli">
									<image src="/static/images/new07.png" class="banffa_img" mode="widthFix"></image>
									<text>{{ item.address }}</text>
								</view>
								<view class="course-infoli" style="margin-left: 16rpx;">
									<uni-icons type="calendar" color="grey" size="20"></uni-icons>
									<text>{{ item.courseTime }}</text>
								</view>
							</view>
							<view class="course-price">￥{{ item.price }}</view>
						</view>
					
					</view>
				</view>
			</view>
			
			<!-- 企业数量，案例数量，人才数量 fix: 对接数据 -->
			<view class="qiyeList">
				<view class="qiyeListli">
					<image src="/static/images/new08.png" class="qiyeListli_img" mode="aspectFill"></image>
					<view class="qiyeListli_v1">{{sysConfigInfo.enterpriseCnt || 1200}}</view>
					<view class="qiyeListli_v2">企业数量</view>
				</view>
				<view class="qiyeListli">
					<image src="/static/images/new09.png" class="qiyeListli_img" mode="aspectFill"></image>
					<view class="qiyeListli_v1">{{sysConfigInfo.caseCnt || 350}}</view>
					<view class="qiyeListli_v2">案例数量</view>
				</view>
				<view class="qiyeListli">
					<image src="/static/images/new10.png" class="qiyeListli_img" mode="aspectFill"></image>
					<view class="qiyeListli_v1">{{sysConfigInfo.peopelCnt || 350}}</view>
					<view class="qiyeListli_v2">人才数量</view>
				</view>
			</view>

			<!-- 最近公开课 -->
			<div class="titleinfo">
				最近公开课
			</div>
			<view class="course-list">
				<view v-for="(item, idx) in courseList" :key="idx" class="course-item" @click="goClassDetail(item)">
					<view>
						<view class="course-title">
							<view class="zuobijia">{{ item.courseTitle }}</view>
							
						</view>
						<view class="course-info">
							<view style="display: flex; align-items: center;">
								<view class="course-infoli">
									<image src="/static/images/new07.png" class="banffa_img" mode="widthFix"></image>
									<text>{{ item.address }}</text>
								</view>
								<view class="course-infoli">
								<uni-icons type="calendar" color="grey" size="20"></uni-icons>
								<text>{{ item.courseTime }}</text>
							</view>
							</view>
							<view class="course-price">￥{{ item.price }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 智能推荐 -->
			<div class="titleinfo">
				智能推荐
			</div>
			<view class="card-list">
				<view v-for="(item, idx) in smartList" :key="idx" class="card" @click="goClassDetail2(item)">
					<image :src="item.coverUrl" class="card-img" mode="aspectFill"></image>
					<view class="card-info">
						<view class="card-title">{{ item.title }}</view>
						<view class="card-desc">
							<view>章节：共{{ item.chapters }}讲</view>
							<!-- <view class="time_img1 flex"><image src="/static/images/index_13.png" class="time_img" mode="widthFix"></image>{{ item.createdAt }}</view> -->
						</view>
						<view class="card-footer">
							<text class="card-price">￥{{ item.price }}</text>
							<text class="card-hot" v-if="item.hot">HOT</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgImage: '',
				// 是否首页哀悼模式
				isMourn: false,
				// banner图设置参数
				indicatorDots: true,
				circular: true,
				autoplay: true,
				interval: 1500,
				duration: 500,
				bannerList: [],
				notices_1: [{
						icon: '/static/images/new01.png',
						text: '公司动态',
						noticeType: 0
					},
					{
						icon: '/static/images/new02.png',
						text: '实力认证',
						noticeType: 1
					},
					{
						icon: '/static/images/new03.png',
						text: '国际合作',
						noticeType: 2
					},
					{
						icon: '/static/images/new04.png',
						text: '研学项目',
						noticeType: 4
					}
				],
				notices_2: [
					{
						icon: '/static/images/new05.png',
						text: '限时特惠',
						noticeType: 3
					},
					{
						icon: '/static/images/new06.png',
						text: '意见反馈',
						noticeType: 5
					}
				],
				hotList: [],
				courseList: [],
				smartList: [],
				sysConfigInfo:{}
			}
		},
		components: {

		},
		onLoad() {
			this.getBanner() //获取banner列表
			this.getCurrentUserUpdateFlagFun() //判断当前用户是否更新信息
			this.getHotListFun() //热门推荐等
			this.getSysConfigFun() //获取系统配置
		},
		onShow() {
			console.log('打印数据')
			console.log(this.sjuLogin)
			// this.sjuLogin.weixinLogin()
			// 检测页面是否需要登录
			this.sjuLogin.checkLogin('/tab/index')
			// #ifdef MP-LARK
			this.bgImage = this.$store.state.bgImage
			// #endif
			if (this.isMourn) {
				this.Theme = this.$store.state.Theme + this.$store.state.mourningStyle
			}
			this.sjuTools.setTabBar()
		},
		methods: {
			// 获取系统配置
			getSysConfigFun(){
				this.sjuRequest("/wx/sysConfig/getSysConfig", 'POST', {}).then(res => {
					console.log('获取系统配置')
					// this.bannerList = res.data
					console.log(res)
					this.sysConfigInfo = res.data
				})
			},
			// 热门推荐等
			getHotListFun(){
				this.sjuRequest("/wx/index/getCourseList", 'POST', {}).then(res => {
					console.log('热门推荐等')
					// this.bannerList = res.data
					console.log(res)
					this.hotList = res.data.recommendList
					this.courseList = res.data.recentlyCourse
					this.smartList = res.data.intelligentRecommend
				})
			},
			// 判断当前用户是否更新信息
			getCurrentUserUpdateFlagFun(){
				this.sjuRequest("wx/user/getCurrentUserUpdateFlag", 'POST',{}).then(res => {
					console.log('判断当前用户是否更新信息')
					console.log(res)
					uni.setStorageSync('isUserUpdateFlag',res.data)
					// this.bannerList = res.data
				})
			},
			// 获取banner列表
			getBanner(){
				this.sjuRequest("wx/banners/getBannerByPosition", 'POST', {
					position:1
				}).then(res => {
					console.log(res)
					this.bannerList = res.data
				})
			},
			// 跳转公告列表
			goNotice(item) {
				console.log(item)
				uni.navigateTo({
					url: '/sub_index/pages/notices/page?info='+JSON.stringify(item)
				})
			},
			// 跳转课程详情----公开课（线下课）
			goClassDetail(item) {
				uni.navigateTo({
					url: '/sub_class/pages/classDetail?id='+item.id
				})
			},
			// 跳转课程详情----（线上课）
			goClassDetail2(item) {
				uni.navigateTo({
					url: '/sub_class/pages/classDetail2?id='+item.id
				})
			},
			goBannerDetail(item){
				uni.navigateTo({
					url: '/sub_common/pages/bannerDetail?id='+item.id
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	/* 轮播图 */
	.swiper {
		$swiper-width: 100%;
		$swiper-height: 300rpx;
		width: $swiper-width;
		height: $swiper-height;

		swiper-item {
			width: $swiper-width;
			height: $swiper-height;

			image {
				width: $swiper-width;
				height: $swiper-height;
			}
		}
	}

	.container {
		background: #f7f8fa;
		width: 100%;
		box-sizing: border-box;
	}

	.banner {
		width: 100%;
		height: 180rpx;
		border-radius: 12rpx;
	}

	.notice-bar {
		width: 710rpx;
		display: flex;
		margin: 20rpx auto;
		flex-wrap: wrap;
		background: #fff;
		border-radius: 14rpx;
		margin-bottom: 0;
	}

	.notice-item {
		width: 33.3%;
		text-align: center;
		margin: 20rpx 0;
	}
	.notice-item{
		width: 325rpx;
		height: auto;
	}

	.notice-icon {
		width: 90rpx;
		height: 90rpx;
	}
	.notice-icon2{
		width: 325rpx;
		height: auto;
	}

	.notice-title {
		color: #31b0e5;
		font-weight: bold;
		
	}

	.notice-content {
		display: block;
		font-size: 26rpx;
		color: #111111;
		font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
		margin-top: 8rpx;
	}

	.section-title {
		font-weight: bold;
		font-size: 32rpx;
		margin: 20rpx 0 10rpx 0;
		display: flex;
		margin-bottom: 20rpx;
	}

	.tuijian {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.card-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.card {
		width: 100%;
		background: #fff;
		border-radius: 12rpx;
		padding: 16rpx;
		box-shadow: 0 2rpx 8rpx #eee;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.card-img {
		width: 300rpx;
		height: 200rpx;
		border-radius: 8rpx;
	}

	.card-info {
		width: 360rpx;
		margin-top: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.card-title {
		font-size: 28rpx;
		margin-bottom: 24rpx;
		font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
		color:#111;
	}

	.card-desc {
		color: #888;
		font-size: 24rpx;
		margin-bottom: 24rpx;
	}

	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.card-price {
		color: #31b0e5;
		font-weight: bold;
	}

	.card-hot {
		background: #f00;
		color: #fff;
		border-radius: 8rpx;
		padding: 2rpx 8rpx;
		font-size: 20rpx;
	}

	.course-list {
		margin-bottom: 30rpx;
	}

	.course-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 16rpx;
		margin-bottom: 12rpx;
	}

	.course-title {
		display: block;
		margin-bottom: 20rpx;
		font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
		font-weight: 500;
		font-size: 30rpx;
		color: #111111;
	}

	.course-info {
		color: #999;
		font-size: 24rpx;
		margin: 4rpx 0;
		display: flex;
		justify-content: space-between;
	}

	.course-price {
		font-weight: 500;
		    font-size: 30rpx;
		    color: #FF5245;
	}

	.course-infoli {
		margin-right: 10rpx;
		display: flex;
		align-items: center;
	}
	.banffa_img{
		width: 20rpx;
		height: auto;
		margin-right: 4rpx;
		margin-top: 3rpx;
	}

	.padding10 {
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.titleinfo {
		width: 100%;
		margin-bottom: 30rpx;
		padding-top: 10rpx;
		font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
		    font-weight: 700;
		    font-size: 38rpx;
		    color: #111111;
	}

	.titleinfo_2 {
		content: '';
		background: linear-gradient(90deg, rgba(38, 182, 182, 1) 20%, rgba(38, 182, 182, .8) 60%, rgba(38, 182, 182, .1) 99%);
		height: 2rpx;
		width: 100rpx;
		display: block;
		margin-left: 20rpx;
		margin-top: 4rpx;
		    display: block;
		    margin-left: 20rpx;
		    margin-top: 4rpx;
		    width: 32rpx;
		    height: 6rpx;
		    background: linear-gradient( 126deg, #018BFF 0%, #4AC5FE 100%);
		    border-radius: 2rpx;
	}

	.titleinfo_1 {
		background: linear-gradient(-90deg, rgba(38, 182, 182, 1) 20%, rgba(38, 182, 182, .8) 60%, rgba(38, 182, 182, .1) 99%);
		height: 2rpx;
		width: 100rpx;
		display: block;
		margin-right: 20rpx;
	}

	.card-img2 {
		width: 100%;
		height: 300rpx;
		margin-bottom: 10rpx;
	}

	.zuobijia {
		width: 100%;
		font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
		font-size: 28rpx;
		color: #111111;
	}

	.qiyeList{
		width: 100%;
		height: auto;
		justify-content: space-between;
		display: flex;
		margin: 20rpx 0;
		margin-bottom: 30rpx;
	}
		
	.qiyeListli{
		width: 31%;
		height: 190rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10rpx;
		text-align: center;
		box-shadow: 8rpx 8rpx 8rpx rgba(0, 0, 0, 0.1);
	}
		
	.qiyeListli_img{
		width: 43rpx;
		height: 43rpx;
		margin-top: 30rpx;
	}
	.qiyeListli_v1{
		font-weight: 500;
		font-size: 38rpx;
		color: #FF5245;
		margin:4rpx 0;
		
	}
	.qiyeListli_v2{
		font-weight: 400;
		font-size: 22rpx;
		color: #111111;
	}
	.reren{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		padding-bottom: 10rpx;
	}
</style>